<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LOL-登录-v1</title>
    <style>
        body,#app {
            width: 100%;
            height: 100%;
            background: #F9F9F9;
            font-family: Helvetica Neue;
            letter-spacing: 1px;
        }
        .login-box {
            width: 35%;
            height: 100%;
            background: #FCFCFC;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
        }

        /*顶部区域相关样式 start*/
        .top-box {
            height: 100px;
            width: 100%;
            position: relative;
        }
        .top-box .logo-icon {
            position: absolute;
            bottom: 0;
            left: 30px;
        }
        .top-box .global-icon {
            position: absolute;
            bottom: 0;
            right: 60px;
        }
        .top-box >span {
            display: inline-block;
            position: absolute;
            font-size: 12px;
            width: 90px;
            bottom: 15px;
            right: 105px;
        }
        /*顶部区域相关样式 end*/

        /*中部区域相关样式 start*/
        .center-box {
            width: 532px;
            height: 500px;
            margin: 5px auto;
            position: relative;
            /*background: lightskyblue;*/
        }
        .center-box > h1 {
            letter-spacing: 10px;
            position: absolute;
            top: 20px;
            left: 10px;
        }
        .center-box > form {
            position: absolute;
            top: 80px;
            left: 10px;
        }
        .center-box .form-item {
            margin-top: 20px;
            position: relative;
        }
        .form-item .input-block {
            background: #EDEDED;
            border-radius: 10px;
            border: #fff solid 1px;
            height: 48px;
            width: 532px;
            text-align: left;
        }
        ::-webkit-input-placeholder {
            letter-spacing: 10px;
            color: #9C9EA3;
            background: #EDEDED;
            border: 1px solid #EDEDED;
        }
        .form-item > input[type=checkbox] {
            width: 20px;
            height: 20px;
            background: #A9B3BB;
            position: absolute;
            top: 0;
            left: 0;
        }
        .form-item > span {
            color: #9C9EA3;
            letter-spacing: 2px;
            line-height: 1px;
            position: absolute;
            top: 10px;
            left: 35px;
        }
        .form-item .btn {
            display: inline-block;
            width: 150px;
            height: 150px;
            border-radius: 35px;
            border: #E8E8E8 solid 2px;
            position: absolute;
            top: 120px;
            left: 180px;
        }
        .form-item .btn:hover {
            box-shadow: 1px 0 8px 2px black;
        }

        .btn .arrow-icon {
            position: absolute;
            left: 51px;
            top: 51px;
        }
        /*中部区域相关样式 end*/

        /*底部区域相关样式 start*/
        .bottom-box {
            width: 532px;
            height: 120px;
            margin: 120px auto;
            position: relative;
        }
        .bottom-box .copyright-box {
            position: absolute;
            left: 5px;
            bottom: 35px;
        }
        .bottom-box .copyright-box > span {
            display: block;
            color: #9C9EA3;
            font-size: 16px;
            letter-spacing: 2px;
            margin-top: 5px;
        }
        .bottom-box .version-box {
            position: absolute;
            right: 5px;
            bottom: 35px;
        }
        .bottom-box .version-box > span {
            display: block;
            color: #9C9EA3;
            font-size: 14px;
            letter-spacing: 2px;
            margin-top: 5px;
        }
        /*底部区域相关样式 end*/

        .pic-box {
            width: 65%;
            height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            background-image: url("./assert/images/lol-login-pic.jpg");
            background-size: 100%;
        }

    </style>
</head>
<body onload="drawLogo()">

<div id="app">
    <div class="login-box">

        <div class="top-box">
            <canvas id="logoCanvas" width="100" height="100" class="logo-icon"></canvas>
            <span><strong>中国(简体中文)</strong></span><svg t="1585622433147" class="global-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1169" width="48" height="48"><path d="M508.2 861.6c-47.2 0-93.1-9.3-136.2-27.5-41.7-17.6-79.1-42.9-111.2-75-32.1-32.1-57.4-69.6-75-111.2-18.3-43.2-27.5-89-27.5-136.2 0-47.2 9.3-93.1 27.5-136.2 17.6-41.7 42.9-79.1 75-111.2s69.6-57.4 111.2-75c43.2-18.3 89-27.5 136.2-27.5 47.2 0 93.1 9.3 136.2 27.5 41.7 17.6 79.1 42.9 111.2 75 32.1 32.1 57.4 69.6 75 111.2 18.3 43.2 27.5 89 27.5 136.2 0 47.2-9.3 93.1-27.5 136.2-17.6 41.7-42.9 79.1-75 111.2-32.1 32.1-69.6 57.4-111.2 75-43.1 18.2-88.9 27.5-136.2 27.5z m0-676.4c-180 0-326.4 146.4-326.4 326.4S328.2 838 508.2 838c180 0 326.4-146.4 326.4-326.4S688.2 185.2 508.2 185.2z" p-id="1170"></path><path d="M225.2 739.9c-6.2 0-12.3-0.1-18.3-0.2-99.9-2.6-158.7-26.6-170-69.4-10.7-40.2 23.7-87.3 99.4-136.1 7-4.5 16.2-2.5 20.7 4.5s2.5 16.2-4.5 20.7c-61 39.3-93.4 77.8-86.7 103.1 4.2 15.9 23.8 26 39.4 31.6 24.9 9 60.3 14.3 102.4 15.5 89.8 2.4 204.4-13.7 322.7-45.1 118.3-31.4 225.7-74.4 302.6-121.1 36-21.9 64.1-44.1 81.2-64.3 10.8-12.7 22.7-31.2 18.5-47.1-5.4-20.2-37.5-35.9-88.1-42.9-8.2-1.1-13.9-8.7-12.8-16.9s8.7-13.9 16.9-12.8c30.3 4.2 55.1 11.3 73.6 21 21.4 11.2 34.7 26 39.4 44 11.4 42.8-27.8 92.8-113.2 144.6C769.2 617.1 659 661.3 538 693.4c-113 30.2-223.2 46.5-312.8 46.5z" p-id="1171"></path></svg>
        </div>
        <div class="center-box">
            <h1>请登录</h1>
            <form id="loginForm" action="#" method="post">
                <div class="form-item">
                    <input type="text" name="userName" class="input-block" placeholder="请输入用户名">
                </div>

                <div class="form-item">
                    <input type="password" name="password" class="input-block" placeholder="请输入密码">
                </div>
                <div class="form-item">
                    <input type="checkbox" name="rememberMe" value="1"><span>记住登录状态</span>
                </div>
                <div class="form-item">
                    <span class="btn" onclick="submit()">
                        <svg t="1585627418891" class="arrow-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2098" width="48" height="48"><path d="M6.71115421 489.90890885l662.73273745-1e-8L669.44389165 551.27305136 6.71115421 551.27305136l2e-8-61.36414251z" fill="#E8E8E8" p-id="2099"></path><path d="M665.71307852 306.28092891L1022.56779958 515.86227332l-356.85472106 215.24570478 0-424.82704919z" fill="#E8E8E8" p-id="2100"></path></svg>
                    </span>
                </div>
            </form>
        </div>

        <div class="bottom-box">
            <div class="copyright-box">
                <span>Urolain作品</span>
                <span>仅供学习交流</span>
            </div>
            <div class="version-box">
                <span>v1.0.1</span>
            </div>
        </div>

        <!--
       <div class="logo-box">
           <div class="hollow-circle">
           <div class="solid-circle"></div>
       </div> -->
    </div>
    <!--版本图片-->
    <div class="pic-box"></div>
</div>
<script type="text/javascript">

    //获取指定form中的所有的<input>对象
    function getElements(formId) {
        var form = document.getElementById(formId);
        var elements = new Array();
        var tagElements = form.getElementsByTagName('input');
        for (var j = 0; j < tagElements.length; j++){
            elements.push(tagElements[j]);

        }
        return elements;
    }

    //获取单个input中的【name,value】数组
    function inputSelector(element) {
        if (element.checked)
            return [element.name, element.value];
    }

    function input(element) {
        switch (element.type.toLowerCase()) {
            case 'submit':
            case 'hidden':
            case 'password':
            case 'text':
                return [element.name, element.value];
            case 'checkbox':
            case 'radio':
                return inputSelector(element);
        }
        return false;
    }

    //组合URL
    function serializeElement(element) {
        var method = element.tagName.toLowerCase();
        var parameter = input(element);

        if (parameter) {
            var key = encodeURIComponent(parameter[0]);
            if (key.length == 0) return;

            if (parameter[1].constructor != Array)
                parameter[1] = [parameter[1]];

            var values = parameter[1];
            var results = [];
            for (var i=0; i<values.length; i++) {
                results.push(key + '=' + encodeURIComponent(values[i]));
            }
            return results.join('&');
        }
    }

    //调用方法
    function serializeForm(formId) {
        var elements = getElements(formId);
        var queryComponents = new Array();

        for (var i = 0; i < elements.length; i++) {
            var queryComponent = serializeElement(elements[i]);
            if (queryComponent)
                queryComponents.push(queryComponent);
        }

        return queryComponents.join('&');
    }

</script>
<script>
    function drawLogo() {
        let canvas = document.getElementById("logoCanvas");
        let ctx = canvas.getContext("2d");
        ctx.font = "60px Helvetica Neue";
        ctx.fillText("L",38,90);

        //  空心圆
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.arc(61, 69, 18, 0, Math.PI*2, false);
        ctx.stroke();

        //  实心圆
        ctx.beginPath();
        ctx.arc(61, 69, 15, 0, Math.PI*2, false);
        ctx.fill();
        console.log("logo 绘制完毕")
    }
    // drawLogo();
    function submit() {
        var params = serializeForm('loginForm');
        alert(JSON.stringify(params));
    }
</script>



</body>

</html>
